<template>
  <view class="the-charts">
    <view class="tabs">
      <view
        :class="`tab ${state.tabIndex === 1 && 'active'}`"
        @click="state.tabIndex = 1"
      >
        量子计算总榜
      </view>
      <view
        :class="`tab ${state.tabIndex === 2 && 'active'}`"
        @click="state.tabIndex = 2"
      >
        量子计算周榜
      </view>
      <view
        :class="`tab ${state.tabIndex === 3 && 'active'}`"
        @click="state.tabIndex = 3"
      >
        奖励榜单
      </view>
    </view>

    <my-empty
      v-if="state.tabIndex === 1"
      :data="state.list1.length"
      :custom-style="{ minHeight: '355px' }"
    >
      <view class="list1">
        <view class="topthree">
          <view
            v-for="(item, index) in [
              state.list1[1],
              state.list1[0],
              state.list1[2],
            ]"
            :key="index"
            :class="`topitem ${item?.user_id === state.user_id && 'bright'}`"
          >
            <template v-if="item">
              <image :src="item.avatar" />
              <view>{{ item.username }}</view>
              <view>{{ item.num }}</view>
            </template>
          </view>
        </view>
        <view class="card">
          <view class="title">
            <text>名次</text>
            <text>用户信息</text>
            <text>首次获得可行解</text>
          </view>
          <view class="ul">
            <view
              v-for="(item, index) in state.list1.slice(3)"
              :key="index"
              :class="`li ${
                myliData1!?.idx < 11 &&
                item.user_id === state.user_id &&
                'bright'
              }`"
            >
              <text>{{ index + 4 }}</text>
              <image :src="item.avatar" />
              <text>{{ item.username }}</text>
              <text>{{ item.num }}</text>
            </view>
          </view>
          <view v-if="myliData1" class="myli">
            <text>{{ myliData1.idx }}</text>
            <image :src="myliData1.avatar" />
            <text>{{ myliData1.username }}</text>
            <text>{{ myliData1.num }}</text>
          </view>
          <view v-else class="myli">未上榜</view>
        </view>
      </view>
    </my-empty>
    <my-empty
      v-if="state.tabIndex === 2"
      :data="state.list2.length"
      :custom-style="{ minHeight: '355px' }"
    >
      <view class="list2">
        <view class="topthree">
          <view
            v-for="(item, index) in [
              state.list2[1],
              state.list2[0],
              state.list2[2],
            ]"
            :key="index"
            :class="`topitem ${item?.user_id === state.user_id && 'bright'}`"
          >
            <template v-if="item">
              <image :src="item.avatar" />
              <view>{{ item.username }}</view>
              <view>{{ item.num }}</view>
            </template>
          </view>
        </view>
        <view class="card">
          <view class="title">
            <text>名次</text>
            <text>用户信息</text>
            <text>首次获得可行解</text>
          </view>
          <view class="ul">
            <view
              v-for="(item, index) in state.list2.slice(3)"
              :key="index"
              :class="`li ${
                myliData2!?.idx < 11 &&
                item.user_id === state.user_id &&
                'bright'
              }`"
            >
              <text>{{ index + 4 }}</text>
              <image :src="item.avatar" />
              <text>{{ item.username }}</text>
              <text>{{ item.num }}</text>
            </view>
          </view>
          <view v-if="myliData2" class="myli">
            <text>{{ myliData2.idx }}</text>
            <image :src="myliData2.avatar" />
            <text>{{ myliData2.username }}</text>
            <text>{{ myliData2.num }}</text>
          </view>
          <view v-else class="myli">未上榜</view>
        </view>
      </view>
    </my-empty>
    <my-empty
      v-if="state.tabIndex === 3"
      :data="state.list3.length"
      :custom-style="{ minHeight: '355px' }"
    >
      <view class="list3">
        <view class="title">
          <text>用户信息</text>
          <text>累计已获得</text>
        </view>
        <view class="ul">
          <view class="li" v-for="(item, index) in state.list3" :key="index">
            <image :src="item.avatar" />
            <text>{{ item.username }}</text>
            <text>{{ item.amount }}</text>
          </view>
        </view>
      </view>
    </my-empty>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import MyEmpty from "@/components/my-empty.vue";
import state from "../useState";

const myliData1 = computed(() => {
  let idx = 0;
  const item = state.list1.find((item, index) => {
    if (item.user_id !== state.user_id) return;
    idx = index + 1;
    return item;
  });
  return item && { ...item, idx };
});
const myliData2 = computed(() => {
  let idx = 0;
  const item = state.list2.find((item, index) => {
    if (item.user_id !== state.user_id) return;
    idx = index + 1;
    return item;
  });
  return item && { ...item, idx };
});
</script>

<style scoped lang="scss">
.the-charts {
  padding: 0 16px;
  .tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 28px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #fff;
    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.2);
      font-size: 12px;
      color: rgba(0, 0, 0, 0.6);
      &.active {
        background: rgba(255, 255, 255, 0.8);
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }

  .list1,
  .list2 {
    margin: 16px 0 24px;
    .topthree {
      display: flex;
      height: 166px;
      background-image: url(https://images-cloud.qboson.com/miniProgram/activity_steps.png);
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: left 12px;
      .topitem {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:nth-child(1) {
          margin-top: 10px;
        }
        &:nth-child(3) {
          margin-top: 20px;
        }
        image {
          width: 32px;
          height: 32px;
          box-sizing: border-box;
          border-radius: 50%;
          border: 1px solid #ffffff;
        }
        view:nth-of-type(1) {
          margin-top: 5px;
          font-size: 11px;
          line-height: 100%;
          color: rgba(0, 0, 0, 0.4);
        }
        view:nth-of-type(2) {
          margin-top: 5px;
          font-size: 20px;
          font-weight: 800;
          line-height: 100%;
          color: rgba(0, 0, 0, 0.9);
        }
        &.bright view {
          color: #b07822;
        }
      }
    }
    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      margin-top: -68px;
      padding: 20px 16px 76px;
      border-radius: 20px;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        #ffffff 100%
      );
      .title {
        display: flex;
        font-size: 11px;
        line-height: 100%;
        color: rgba(0, 0, 0, 0.4);
        :nth-child(1) {
          width: 44px;
        }
        :nth-child(2) {
          margin-right: auto;
        }
      }
      .li {
        display: flex;
        align-items: center;
        margin-top: 12px;
        text:nth-child(1) {
          width: 44px;
          font-size: 14px;
          font-weight: 800;
          line-height: 100%;
          color: #5b8fb3;
        }
        :nth-child(2) {
          margin-right: 6px;
          width: 32px;
          height: 32px;
          box-sizing: border-box;
          border-radius: 50%;
          border: 1px solid #ffffff;
        }
        :nth-child(3) {
          margin-right: auto;
          font-size: 12px;
          line-height: 100%;
          color: rgba(0, 0, 0, 0.4);
        }
        :nth-child(4) {
          font-size: 14px;
          font-weight: 800;
          line-height: 100%;
          color: rgba(0, 0, 0, 0.9);
        }
        &.bright text {
          color: #b07822;
        }
      }
      .myli {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 64px;
        box-sizing: border-box;
        padding: 0 20px;
        border-radius: 20px;
        background: #f35645;
        font-size: 14px;
        font-weight: 800;
        line-height: 100%;
        color: rgba(255, 255, 255, 0.95);
        text:nth-child(1) {
          width: 44px;
        }
        :nth-child(2) {
          width: 32px;
          height: 32px;
          margin-right: 6px;
          box-sizing: border-box;
          border-radius: 50%;
          border: 1px solid #ffffff;
        }
        :nth-child(3) {
          margin-right: auto;
          font-size: 12px;
          font-weight: normal;
        }
      }
    }
  }

  .list3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 415px;
    box-sizing: border-box;
    margin: 16px 0 24px;
    padding: 20px 16px;
    border-radius: 20px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0%,
      #ffffff 100%
    );
    .title {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      line-height: 100%;
      color: rgba(0, 0, 0, 0.4);
    }

    .li {
      display: flex;
      align-items: center;
      margin-top: 12px;
      image {
        width: 32px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid #ffffff;
      }
      text:nth-of-type(1) {
        margin-left: 6px;
        font-size: 12px;
        line-height: 100%;
        color: rgba(0, 0, 0, 0.4);
      }
      text:nth-of-type(2) {
        margin-left: auto;
        font-size: 14px;
        line-height: 100%;
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }
}
</style>
